<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { STableProps, STableColumnProps } from '@surely-vue/table';

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
}

onMounted(() => {
  removeWatermark('surely-table', 'Invalid License');
  removeWatermark('surely-table', 'Unlicensed Product');
  removeWatermark('surely-table-body', 'Powered by Surely Vue');
});

// 去除 surely-table 组件水印、控制台警告
const error = console.error;
window.console.error = (message) => {
  if (message.includes('*')) {
    return false;
  }
  error(message);
};
const removeWatermark = (className: string, innerHTML: string) => {
  const surelyTable = document.body.getElementsByClassName(className);
  for (let s = 0; s < surelyTable.length; s++) {
    const stChildList = surelyTable[s].children;
    for (let d = 0; d < stChildList.length; d++) {
      if (stChildList[d].innerHTML === innerHTML) {
        stChildList[d].innerHTML = '';
      }
    }
  }
};
const columns = ref([
  {
    title: 'Full Name',
    dataIndex: 'name',
    fixed: 'left',
    width: 150,
    resizable: true,
    rowDrag: true
  },
  {
    title: 'Age',
    dataIndex: 'age',
    fixed: 'left',
    width: 100,
    resizable: true
  },
  {
    title: 'Column 1（minWidth： 100， maxWidth： 500）',
    dataIndex: 'address',
    key: 'address1',
    minWidth: 100,
    maxWidth: 500,
    resizable: true
  },
  {
    title: 'Column 2',
    key: 'address2',
    dataIndex: 'address'
  },
  {
    title: 'Column 3',
    key: 'address3',
    dataIndex: 'address'
  },
  {
    title: 'Column 4',
    key: 'address4',
    dataIndex: 'address'
  },
  { title: 'Column 5', dataIndex: 'address', key: 'address5' },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    resizable: true
  }
]);
const dataSource: DataItem[] = [];
for (let i = 0; i < 0; i++) {
  dataSource.push({
    key: i,
    name: `Edrward ${i}`,
    age: i + 1,
    address: `London Park no. ${i}`
  });
}

const disabledList = [2, 3, 5, 7, 8];
const rowSelection: STableProps['rowSelection'] = {
  onChange: (selectedRowKeys: (string | number)[], selectedRows) => {
    console.log(selectedRowKeys);
    console.log(selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: disabledList.indexOf(record.key) !== -1
  }),
  type: 'checked'
};
</script>

<template>
  <div class="table-container p-2">
    <s-table
      column-drag
      :columns="columns"
      :data-source="dataSource"
      :row-selection="rowSelection"
      :pagination="false"
      :scroll="{ y: 500, x: 2000 }"
    >
      <template #emptyText>
        <el-empty :image-size="100" />
      </template>
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'">
          <el-button>Edit</el-button>
        </template>
      </template>
    </s-table>
  </div>
</template>

<style lang="scss" scoped></style>
